<form class="form-horizontal" method="post" action="/topic/add_test_volume">
	<!--步骤一-->
	<div class="add_step" >
		科目：
		<select name="subject_id" id="subject_id">
			<{foreach from=$subject item=item}>
				<option value="<{$item.id}>"><{$item.title}></option>
			<{/foreach}>
		</select>
		<br /><br />

		组卷名称：<input type="text" name="name" id="name" value="" />
		<br /><br />

		<input type="button" class="next" value="下一步" />
		<a href="">取消</a>
	</div>

	<!--步骤二-->
	<div class="add_step">
		组卷名称：<span id="name_text"></span>
		<br /><br />

		题目来源：
		<select name="topic_source" id="source_type">
			<option value="0">全部题目</option>
			<option value="1">自有题目</option>
			<option value="2">系统题目</option>
		</select>
		<br /><br />

		题目来源：
		<input type="radio" name="create_topic_type" value="1">系统出题
		<input type="radio" name="create_topic_type" value="2">自主出题
		<br /><br />

		出题范围：<input type="text" value="0" id="chapter_id" name="chapter_id" />
		<br /><br />

		组卷模版：
		<select name="template_id" id="template_id">
			<option value="">请选择模版</option>
			<option value="0">自定义模版</option>
			<{foreach from=$templates item=template}>
				<option value="<{$template.id}>"><{$template.template_name}></option>
			<{/foreach}>
		</select>
		<br /><br />

		模版名称：<input type="text" id="template_name" value="" />
		<br /><br />

		<div class="template_box">
			<ul class="tpl-list">
				<li class="item " data-qtype="s">
					<span class="qtype">单选题</span>
					<span class="qvalue">题目数量<input value="30" type="text" name="number[1]">/<i class="total-count">800</i></span>
					<span class="qvalue">题目分值<input value="1" type="text" name="fraction[1]">分</span>
				</li>
				<li class="item " data-qtype="m">
					<span class="qtype">多选题</span>
					<span class="qvalue">题目数量<input value="20" type="text" name="number[2]">/<i class="total-count">800</i></span>
					<span class="qvalue">题目分值<input value="2" type="text" name="fraction[2]">分</span>
				</li>
				<li class="item " data-qtype="j">
					<span class="qtype">判断题</span>
					<span class="qvalue">题目数量<input value="30" type="text" name="number[3]">/<i class="total-count">800</i></span>
					<span class="qvalue">题目分值<input value="1" type="text" name="fraction[3]">分</span>
				</li>
				<!-- <li class="item " data-qtype="e">
					<span class="qtype">分析题</span>
					<span class="qvalue">题目数量<input value="2" type="text" name="number[4]">/<i class="total-count">100</i></span>
					<span class="qvalue">题目分值<input value="10" type="text" name="fraction[4]">分</span>
				</li> -->
			</ul>
			<span class="total">作业总分：<i>100</i>分</span> 
			<span class="add_template">设置为模板</span>
			<span class="remove_template" data-tid="" style="display:none">删除模板</span> 
		</div>
		<br /><br />
		答题卡
		<br /><br />
		<div id="topic_list">
			单选题
			<{section name=sn loop=30}>
			<span class="type_1" style="padding:3px 6px; border:1px solid red;"><{$smarty.section.sn.index+1}></span>
			<{/section}>
			<br /><br />
			多选题
			<{section name=sn loop=20}>
			<span class="type_2" style="padding:3px 6px; border:1px solid red;"><{$smarty.section.sn.index+1}></span>
			<{/section}>
			<br /><br />
			判断题
			<{section name=sn loop=30}>
			<span class="type_3" style="padding:3px 6px; border:1px solid red;"><{$smarty.section.sn.index+1}></span>
			<{/section}>
			<br /><br />
			<div id="type_1"></div>
			<div id="type_2"></div>
			<div id="type_3"></div>
		</div>

		<iframe id="topic_list_box" border=2 frameborder=0 width=500 height=500 marginheight=0 marginwidth=0 scrolling=no src="">test
		</iframe>

		<input type="button" class="next" value="下一步" />
		<input type="submit" value="提交" />
	</div>

	
	<!--步骤三-->
	<div class="add_step" style="display:none;">
		<input type="submit" value="确定" />
	</div>
</form>

<script type="text/javascript" src="/static/public/jquery-1.11.1.min.js"></script>
<script>
	$(function(){
		$(".next").click(function(){
			$(this).closest(".add_step").hide().next().show();
			$("#name_text").html($("#name").val());
		})

		var total_fraction = 0;

		//模版总分计算
		$(".template_box input[type=text]").on("change",function(){
			var number_one = $(".template_box input[name='number[1]']").val();
			var fraction_one = $(".template_box input[name='fraction[1]']").val();
			var total_one = number_one * fraction_one;

			var number_two = $(".template_box input[name='number[2]']").val();
			var fraction_two = $(".template_box input[name='fraction[2]']").val();
			var total_two = number_two * fraction_two;

			var number_three = $(".template_box input[name='number[3]']").val();
			var fraction_three = $(".template_box input[name='fraction[3]']").val();
			var total_three = number_three * fraction_three;

			total_fraction = total_one + total_two + total_three;
			if(total_fraction > 200){
				alert("总分不能超过200分");
				return false;
			}
			$(".total i").html(total_fraction)
			/*var number_four = $(".template_box input[name='number[4]']").val();
			var fraction_four = $(".template_box input[name='fraction[4]']").val();
			var total_four = number_four * fraction_four;*/
		})

		//保存模版
		$(".add_template").click(function(){
			if($("#template_id").val() > 0){
				return false;
			}
			if(total_fraction > 200){
				alert("总分不能超过200分");
				return false;
			}
			var number_one = $(".template_box input[name='number[1]']").val();
			var fraction_one = $(".template_box input[name='fraction[1]']").val();

			var number_two = $(".template_box input[name='number[2]']").val();
			var fraction_two = $(".template_box input[name='fraction[2]']").val();

			var number_three = $(".template_box input[name='number[3]']").val();
			var fraction_three = $(".template_box input[name='fraction[3]']").val();

			$.ajax({
		   		type: "POST",
			   	url: "/topic/save_test_volume_template",
			   	dataType:"json",
            	data:{'number[1]':number_one,'number[2]':number_two,'number[3]':number_three,'fraction[1]':fraction_one,'fraction[2]':fraction_two,'fraction[3]':fraction_three,'template_name':$("#template_name").val()},
			   	success: function(result){
			   		// layer.close(ii);
			   		alert(result.msg);
			   		if(result.error == 0){
			   			var html = "<option value='"+result.template_id+"' selected='selected'>"+result.template_name+"</option>";
			   			$("#template_id").append(html);
			   		}
			   	}
			});
		})

		//获取模版信息
		$("#template_id").change(function(){
			var template_id = $(this).val();
			if(template_id > 0){
				$.ajax({
			   		type: "POST",
				   	url: "/topic/get_template_content",
				   	dataType:"json",
	            	data:{'template_id':template_id},
				   	success: function(result){
				   		// layer.close(ii);
				   		if(result.error == 0){
				   			$(".template_box input[type=text]").attr("disabled", true)
			   				$.each(result.content,function(i,n){
			   					$(".template_box input[name='number["+i+"]']").val(n.number)
			   					$(".template_box input[name='fraction["+i+"]']").val(n.fraction)
							});//topic_list_box
							load_topic();
				   		}else{
				   			alert(result.msg);
				   		}
				   	}
				});
			}else{
				$(".template_box input[type=text]").attr("disabled", false);

				$(".template_box input[name='number[1]']").val(30);
				$(".template_box input[name='fraction[1]']").val(1);

				$(".template_box input[name='number[2]']").val(20);
				$(".template_box input[name='fraction[2]']").val(2);

				$(".template_box input[name='number[3]']").val(30);
				$(".template_box input[name='fraction[3]']").val(1);
			}
		})

		$("input[name='create_topic_type']").change(function(){
			load_topic();
		})
		$("#source_type").change(function(){
			load_topic();
		})
		$("#subject_id").change(function(){
			load_topic();
		})

		function load_topic(){
			if($("input[name='create_topic_type']:checked").val() == 2 && $("#template_id").val() > 0){
				var src = "/topic/get_list/"+$("#source_type").val()+"/"+$("#subject_id").val()+"/"+$("#chapter_id").val();
				var type_element = $("#topic_list_box").contents().find("#type");
				var subject_text_element = $("#topic_list_box").contents().find("#subject_text");
				if(type_element.length > 0){
					src += "/" + type_element.val();
				}
				if(subject_text_element.length > 0){
					src += "/" + subject_text_element.val();
				}
				$("#topic_list_box").attr('src', src);
			}else{
				$("#topic_list_box").attr('src', '');
			}
		}
	})
</script>